<template>
  <rx-layout>
<!--    <div slot="left">
      <a-button>点击</a-button>
    </div>-->
    <div slot="center" style="overflow: hidden">
      <canvas  id="canvas" width="2000" height="2000"></canvas>
      <ul id="contextmenu" style="display: none;">
        <li>{{i18n('form.clockwise','顺时针旋转')}}</li>
        <li>{{i18n('form.counterclockwise','逆时针旋转')}}</li>
        <li>{{i18n('form.color','更改颜色')}}</li>
        <li>{{i18n('form.enlarge','放大')}}</li>
        <li>{{i18n('form.shrink','缩小')}}</li>
        <li>{{i18n('form.node','删除该节点')}}</li>
        <li>{{i18n('form.corner','圆角')}}</li>
      </ul>
    </div>
  </rx-layout>
</template>

<script>
import { RxLayout } from "@lowcode/jpaas-common-lib"

export default {
  name: "JTopoDom",
  components:{
    RxLayout
  },
  created() {
    this.init()
  },
  methods:{
      i18n(name,text,key){
          return this.$ti18(name,text,"listdom",key);
      },
    init(){
      this.$nextTick(function (){
        var canvas = document.getElementById('canvas');
        var stage = new JTopo.Stage(canvas);
        stage.mousewheel(function (e){

        })
        //显示工具栏
    //    showJTopoToobar(stage);
        var scene = new JTopo.Scene();
        stage.add(scene);
     //   scene.background = './img/bg.jpg';

        var cloudNode = new JTopo.Node('洗选系统');
        cloudNode.setSize(100, 60);
        cloudNode.setLocation(540,130);
        cloudNode.textOffsetY  = -4;
        cloudNode.textPosition = 'Middle_Center'
        cloudNode.layout = {type: 'tree', width:540, height: 100}
        cloudNode.fontColor='0,0,0'
        scene.add(cloudNode);
        var currentNode = null;

        function handler(event){
          if(event.button == 2){// 右键
            // 当前位置弹出菜单（div）
            var dmo = document.getElementById('contextmenu');
            var _style = " top:"+ event.pageY+"px; left:"+ event.pageX +"px;display:block;"
            dmo.setAttribute('style',_style)
          }
        }
        cloudNode.addEventListener('mouseup', function(event){
          currentNode = this;
          handler(event);
        });
        for(var i=1; i<3; i++){
          var node =''
          if(i==1){
            node= new JTopo.Node("所有设施");
          }else if(i==2){
            node = new JTopo.Node("所有设备");
          }
          node.fillStyle = '0,0,0';
          node.setSize(80, 40);
          node.textOffsetY  = -4;
          node.radius = 15;
          node.layout = {type: 'tree', width:150,height: 100};
          node.fontColor='0,0,0'
          node.textPosition = 'Middle_Center'
          node.addEventListener('mouseup', function(event){
            currentNode = this;
            handler(event);
          });
          scene.add(node);
          var link = new JTopo.Link(cloudNode, node);
          scene.add(link);
            if(i == 1){
              for(var j=0; j<3; j++){
                var vmNode ='';
                if(j==0){
                  vmNode = new JTopo.Node('地上主生产系统建筑物');
                }else if(j==1){
                  vmNode = new JTopo.Node('地上辅助生产系统建筑物');
                }else {
                  vmNode = new JTopo.Node('地上电力工程建筑物');
                }
                vmNode.setSize(140, 40);
                vmNode.textOffsetY  = -4;
                vmNode.fillStyle = '255,0,0';
                vmNode.fontColor='0,0,0'
                vmNode.textPosition = 'Middle_Center'
                vmNode.addEventListener('mouseup', function(event){
                  currentNode = this;
                  handler(event);
                });
                vmNode.layout = {type: 'tree',width:60,height: 160};

                scene.add(vmNode);
                scene.add(new JTopo.Link(node, vmNode));

                if(j==0){
                  for(var m=0; m<4; m++){
                    var vm=''
                    if(m==0){
                       vm = new JTopo.Node('原煤仓');
                    }else if( m==1) {
                      vm = new JTopo.Node('筛分车间');
                    }else {
                      vm = new JTopo.Node('压滤车间');
                    }

                    vm.addEventListener('mouseup', function(event){
                      currentNode = this;
                      handler(event);
                    });
                    vm.fillStyle = '255,255,0';
                    vm.fontColor='0,0,0'
                    scene.add(vm);
                    var _link =new JTopo.Link(vmNode, vm)
                    scene.add(_link);
                  }
                }else if(j==2){
                  for(var m=0; m<1; m++){
                    vm = new JTopo.CircleNode('变配电室');
                    vm.addEventListener('mouseup', function(event){
                      currentNode = this;
                      handler(event);
                    });
                    vm.fillStyle = '255,255,0';
                    vm.fontColor='0,0,0'
                    scene.add(vm);
                    var _link =new JTopo.Link(vmNode, vm)
                    scene.add(_link);
                  }
                }

              }
            }else {
              for(var j=0; j<4; j++){
                var vmNode ='';
                if(j==0){
                  vmNode = new JTopo.Node('筛分设备');
                }else if(j==1){
                  vmNode = new JTopo.Node('破碎粉磨设备');
                }else if(j==2){
                  vmNode = new JTopo.Node('洗选设备');
                }else {
                  vmNode = new JTopo.Node('通用机电设备');
                }
                vmNode.setSize(140, 40);
                vmNode.radius = 10;
                vmNode.fillStyle = '255,0,0';
                vmNode.fontColor='0,0,0'
                vmNode.textPosition = 'Middle_Center'
                vmNode.textOffsetY  = -4;
                vmNode.layout = {type: 'tree',width:60,height: 160};
                vmNode.addEventListener('mouseup', function(event){
                  currentNode = this;
                  handler(event);
                });
                scene.add(vmNode);
                scene.add(new JTopo.Link(node, vmNode));
                if(j== 0){
                    var vm = new JTopo.Node('振动筛');
                    vm.radius = 5;
                    vm.fillStyle = '255,255,0';
                    vm.fontColor='0,0,0'
                  vm.addEventListener('mouseup', function(event){
                    currentNode = this;
                    handler(event);
                  });
                    scene.add(vm);
                    var _link =new JTopo.Link(vmNode, vm)
                    scene.add(_link);
                }else if(j==1){
                  for (var m = 0 ;m<2 ;m++){
                    var vm = ''
                    if(m==0){
                      vm = new JTopo.Node('破碎机');
                    }else{
                      vm = new JTopo.Node('磨机');
                    }
                    vm.addEventListener('mouseup', function(event){
                      currentNode = this;
                      handler(event);
                    });
                    vm.fillStyle = '255,255,0';
                    vm.fontColor='0,0,0'
                    scene.add(vm);
                    var _link =new JTopo.Link(vmNode, vm)
                    scene.add(_link);
                  }
                }else if(j==2) {
                  for (var m2 =0 ;m2<2 ;m2++){
                    var vm ='';
                    if(m2==0){
                       vm= new JTopo.Node('重力选矿设备');
                    }else{
                       vm = new JTopo.Node('磁选设备');
                    }
                    vm.addEventListener('mouseup', function(event){
                      currentNode = this;
                      handler(event);
                    });
                    vm.fillStyle = '255,255,0';
                    vm.fontColor='0,0,0'
                    scene.add(vm);
                    var _link =new JTopo.Link(vmNode, vm)
                    scene.add(_link);
                  }
                }else {
                  var vm = new JTopo.Node('发电机');
                  vm.addEventListener('mouseup', function(event){
                    currentNode = this;
                    handler(event);
                  });
                  vm.fillStyle = '255,255,0';
                  vm.fontColor='0,0,0'
                  scene.add(vm);
                  var _link =new JTopo.Link(vmNode, vm)
                  scene.add(_link);
                }

              }
            }


        }
        JTopo.layout.layoutNode(scene, cloudNode,true);

        scene.addEventListener('mouseup', function(e){
          if(e.target && e.target.layout){
            JTopo.layout.layoutNode(scene, e.target, true);
          }
        });
        scene.click(function (e){
         var s = stage.find('node')
        })
        stage.click(function(event){
          if(event.button == 0){// 右键
            // 关闭弹出菜单（div）
            var dmo = document.getElementById('contextmenu');
            dmo.setAttribute('style','display:none')
          }
        });
        var _dmo = document.getElementById('contextmenu');
        _dmo.addEventListener('click',function (event){
            var el = event.target ;
            if(el.tagName == 'LI'){
              var text = el.innerText;
              if(text =='删除该节点'){
                scene.remove(currentNode);
              }
              if(text =='顺时针旋转'){
                currentNode.rotate += 0.5;
              }
              if(text == '逆时针旋转'){
                currentNode.rotate -= 0.5;
              }
              if(text == '放大'){
                currentNode.scaleX += 0.2;
                currentNode.scaleY += 0.2;
              }
              if(text == '缩小'){
                currentNode.scaleX -= 0.2;
                currentNode.scaleY -= 0.2;
              }
              if(text == '更改颜色'){
                currentNode.fillColor = Math.random()*255+','+Math.random()*255+","+Math.random()*255
              }
              if(text == '圆角'){
                currentNode.borderRadius= 6
                currentNode.borderWidth= 2
              }
            }
          _dmo.setAttribute('style',"display:none");
        })

      })
    }


  }

}
</script>

<style scoped>
#contextmenu{
  position: fixed;
  z-index: 99960;
  width: 120px;
  top: 0;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 5px rgb(154 147 147);
}
#contextmenu li{
  padding: 4px 6px;
}
#contextmenu li:hover{
  background: #4D9EFF;
  color: #fff;
  cursor: pointer;
}
</style>